import React, { Component, Fragment } from 'react'
import Styles from './index.less'
import classnames from 'classnames'
function Ellipsis() {
  return (
    <svg t="1541129219948" className={Styles.ellipsis} viewBox="0 0 1024 1024"><defs><style type="text/css"></style></defs><path d="M500.092807 419.555541c-52.607148 0-95.252411 41.259706-95.252411 92.155886 0 50.897204 42.645263 92.155886 95.252411 92.155886 52.605102 0 95.250364-41.259706 95.250364-92.155886C595.344195 460.815247 552.697909 419.555541 500.092807 419.555541zM928.726098 419.555541c-52.607148 0-95.250364 41.259706-95.250364 92.155886 0 50.897204 42.643216 92.155886 95.250364 92.155886s95.252411-41.259706 95.252411-92.155886C1023.978509 460.815247 981.332223 419.555541 928.726098 419.555541zM95.271852 419.555541c-52.605102 0-95.250364 41.259706-95.250364 92.155886 0 50.897204 42.645263 92.155886 95.250364 92.155886 52.607148 0 95.252411-41.259706 95.252411-92.155886C190.524263 460.815247 147.879 419.555541 95.271852 419.555541z" p-id="1945" fill="#707070"></path></svg>
  )
}
function NumBtn(props) {
  const { pageNoChange, item, pageNo } = props
  return (
    <div className={classnames(Styles.numBtn, {[Styles.active]: pageNo === item})} onClick={pageNoChange(item)} key={item}>{item}</div>
  )
}
export default class Pagination extends Component {
    constructor(props) {
      super(props)
      const { count, pageNo, pageSize } = props
      if (count) {
        this.pageCount = Math.ceil(count / pageSize)
      } 
      this.state = {
        pageInputValue: pageNo
      }
      this.isClickToChangePage = false
      this.numberInputOnChange = this.numberInputOnChange.bind(this)
      this.pageNoChangeCache = {}
    }
    pageNoChange(no) {
      const { onChange, pageNo } = this.props
      if (no === pageNo) {
        return
      }
      if (this.pageNoChangeCache[no]) {
        return this.pageNoChangeCache[no]
      }
      const { pageCount } = this
      let newPageno = no < 1 ? 1 : no > pageCount ? pageCount : no
      this.pageNoChangeCache[no] = () => {
        if (newPageno!==this.state.pageInputValue) {
          this.isClickToChangePage = true
          this.setState({
            pageInputValue: newPageno
          })
        }
        onChange(newPageno)
      }
      return this.pageNoChangeCache[no]
    }
    componentWillReceiveProps(nextProps) {
      if (!this.pageCount) {
        const { count, pageNo, pageSize } = nextProps
        this.pageCount = Math.ceil(count / pageSize)
        this.setState({
          pageInputValue: pageNo
        })
      }
    }
    // shouldComponentUpdate(nextProp, nextState) {
    //   if (this.state.pageInputValue !== nextState.pageInputValue && this.isClickToChangePage) {
    //     this.isClickToChangePage = false
    //     return false
    //   } 
    //   return true
    // }
    numberInputOnChange(e) {
      let value = e.target.value
      if (/^[0-9]*$/.test(value)) {
        let pageInputValue = e.target.value ? parseInt(e.target.value) : ''
        this.setState({
          pageInputValue: pageInputValue
        })
      }
    }
    render() {
      let numBtns
      const { pageCount } = this
      if (!pageCount) {
        return null
      }
      const { pageNo } = this.props
      const { pageInputValue } = this.state
      if (pageCount < 7) {
        let list = new Array(pageCount).fill(1).map((item, index) => index + 1)
        numBtns = React.cloneElement(<Fragment>
                                        {list.map(item => (<NumBtn item={item} pageNoChange={this.pageNoChange.bind(this)} key={item} pageNo={pageNo}/>))}
                                      </Fragment>)
      } else if (pageNo < 4) {
        let prefixPageCount = pageNo === 3 ? 4 : 3
        let list = new Array(prefixPageCount).fill(1).map((item, index) => index + 1)
        numBtns = React.cloneElement(<Fragment>
                                        {list.map(item => (<NumBtn item={item} pageNoChange={this.pageNoChange.bind(this)} key={item} pageNo={pageNo}/>))}
                                        <Ellipsis/>
                                        <NumBtn item={pageCount} pageNoChange={this.pageNoChange.bind(this)} key={pageCount} pageNo={pageNo}/>
                                      </Fragment>)

      } else if (pageNo < pageCount - 2) {
        let listFirstNum = pageNo - 1
        let list = new Array(3).fill(1)
        numBtns = React.cloneElement(<Fragment>
                                        <NumBtn item={1} pageNoChange={this.pageNoChange.bind(this)} key={1} pageNo={pageNo}/>
                                        <Ellipsis/>
                                          {list.map(() => (<NumBtn item={listFirstNum} pageNoChange={this.pageNoChange.bind(this)} key={listFirstNum++} pageNo={pageNo}/>))}
                                        <Ellipsis/>
                                        <NumBtn item={pageCount} pageNoChange={this.pageNoChange.bind(this)} key={pageCount} pageNo={pageNo}/>
                                      </Fragment>)
      } else {
        let postfixCount = pageNo === pageCount - 2 ? 4 : 3
        let list = new Array(postfixCount).fill(1)
        let listFirstNum = pageCount-postfixCount+1
        numBtns = React.cloneElement(<Fragment>
                                        <NumBtn item={1} pageNoChange={this.pageNoChange.bind(this)} key={1} pageNo={pageNo}/>
                                        <Ellipsis/>
                                          {list.map(() => (<NumBtn item={listFirstNum} pageNoChange={this.pageNoChange.bind(this)} key={listFirstNum++} pageNo={pageNo}/>))}
                                        </Fragment>)
      }
      return (
        <div className={Styles.pagination}>
          <div className={Styles.btn} onClick={this.pageNoChange(1)}>首页</div>
          <div className={Styles.btn} onClick={this.pageNoChange(pageNo-1)}>上一页</div>
          <div className={Styles.numContainer}>
            {numBtns}
          </div>
          <div className={Styles.btn} onClick={this.pageNoChange(pageNo+1)}>下一页</div>
          <div className={Styles.btn} onClick={this.pageNoChange(pageCount)}>尾页</div>
          <input className={Styles.numInput} value={pageInputValue} onChange={this.numberInputOnChange}/>
          <div className={Styles.btn} onClick={this.pageNoChange(pageInputValue)}>跳转</div>
        </div>
      )
    }
  }